<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>待办</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.css"></script>
<script src="style/js/jquery-1.11.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.js"></script>
<script
	src="bootstrap-3.3.7-dist/js/locales/bootstrap-datetimepicker.fr.js"></script>

<style type="text/css">
#toprow {
	
}

#topcolumn {
	padding: 0px;
}

.container {
	margin: 0px;
	width: 100%;
	height: 100%;
}

.leftbutton {
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 50px;
	padding-left: 20px;
	cursor: pointer;
}

.leftbutton:hover {
	background-color: #46A3FF
}

.buttoncss {
	float: left;

	/* margin-top:10px;
	margin-bottom:10px;
	margin-left:20px; */
}

.buttoncss:hover {
	background-color: #46A3FF
}

.buttonword {
	margin-left: 10px;
	margin-top: 8px;
	height: 40px;
	color: #FFFFFF;
	float: right;
}

</style>
<script type="text/javascript">
	$(function() {
		

		//初始加载获取未完成任务
		$.post("getMissionsByUser.do",
				{
				},function(data){
					html="";
					for (var i = 0; i < data.length; i++){
						html+="<div id='mission-"+data[i].missionid+"' style='border-bottom:1px solid #d0d0d0;'>"+
						"<h3 id='"+data[i].missionid+"'>任务名称:"+data[i].missionname+"</h3>"+
						"<input class='missioncheckbox' onclick='missioncomplete("+data[i].missionid+")' style='float:right;' type='checkbox' value='' />开始时间"+data[i].starttime+
						"结束时间"+data[i].endtime+"<br /><h5>任务内容:"+data[i].description+"</h5></div>"
					}
					$("#missionstobedone").html("");
					$("#missionstobedone").append(html);
				},"json" 
		); 
		
		
		//初始加载获取已完成任务
		$.post("getMissionsDoneByUser.do",
				{
				},function(data){
					html="";
					for (var i = 0; i < data.length; i++){
						html+="<div id='mission-"+data[i].missionid+"' style='border-bottom:1px solid #d0d0d0;'>"+
						"<h3 id='"+data[i].missionid+"'>任务名称:"+data[i].missionname+"</h3>"+
						"开始时间"+data[i].starttime+
						"结束时间"+data[i].endtime+"<br /><h5>任务内容:"+data[i].description+"</h5></div>"
					}
					$("#panel-havedone").html("");
					$("#panel-havedone").append(html);
				},"json" 
		); 

//-------------------初始加载事件↑--------------------------表单↓---------------------------------------------------
		/* $("input:checkbox").click(
				function() {
					alert("选中");
					$(this).attr("disabled", "disabled");
					$(this).parent("div").hide(1000);
					var missionid = $(this).parent().children().find("<h3>").attr("id");
					//alert(missionid);

					$.ajax({
						url : "completemission.do?missionid=" + missionid,
						success : function(result) {
							alert("完成当前任务");
						}
					});
				}); */


		/* $("#checkboxtest").click(function(){
			alert("选择")
			$(this).attr("disabled", "disabled");
		}); */
//载入负责人的按钮事件
		$("#choseleader")
				.click(
						function() {
							$.post(
									"getallusers.do",
									{},
									function(data) {
									html = "";
									for (var i = 0; i < data.length; i++) {
										html += "<input name='leader' type='radio' value="+data[i].userid+" checked='checked' />"
												+ data[i].username
										}
										$("#choseleaderdiv").empty();
										$("#choseleaderdiv").append(
														html);
								}, "json");
						});

		//载入任务参与者的按钮事件
		$("#chosemember")
				.click(
						function() {
							$.post(
									"getallusers.do",
									{},
									function(data) {
										html = "";
										for (var i = 0; i < data.length; i++) {
												html += "<input name='member' type='checkbox' value="+data[i].userid+" />"
															+ data[i].username
										}
										$("#chosememberdiv").empty();
										$("#chosememberdiv").append(
														html);
									}, "json");
						});

		//提交任务的按钮事件
		$("#missionsubmit")
				.click(
						function() {
							var param = "missionname="
									+ $('#missionname').val()
									+ "&missiondescription="
									+ $('#missiondescription').val()
									+ "&leaderid=";
							param += $(
									"#choseleaderdiv input:radio[name='leader']:checked")
									.val();
							param += "&memberid=";
							$(
									"#chosememberdiv input:checkbox[name='member']:checked")
									.each(function() {
										param += $(this).val() + ",";
									});
							param += "&starttime="
									+ $("input[name='missionstarttime']").val();
							param += "&endtime="
									+ $("input[name='missionendtime']").val();
							$.ajax({
								type : 'post',
								url : 'addmission.do',
								data : param,
								success : function(data) {
									alert("发布任务成功！");
								},
								error : function() {
									alert("出错了！");
								}
							});
						});

		//---------------任务↑---------------------------活动↓-------------------------------------	

		//载入活动参与者的按钮事件
		$("#choseactivitymember")
				.click(
						function() {
							$
									.post(
											"getallusers.do",
											{},
											function(data) {
												html = "";
												for (var i = 0; i < data.length; i++) {
													html += "<input name='activitymember' type='checkbox' value="+data[i].userid+" />"
															+ data[i].username
												}
												$("#choseactivitymemberdiv")
														.empty();
												$("#choseactivitymemberdiv")
														.append(html);
											}, "json");
						});

		//提交活动的按钮事件
		$("#activitysubmit")
				.click(
						function() {
							var param = "activityname="
									+ $('#activityname').val()
									+ "&activitydescription="
									+ $('#activitydescription').val();
							param += "&activityaddress="
									+ $('#activityaddress').val();
							param += "&activitymemberid=";
							$(
									"#choseactivitymemberdiv input:checkbox[name='activitymember']:checked")
									.each(function() {
										param += $(this).val() + ",";
									});
							param += "&starttime="
									+ $("input[name='activitystarttime']")
											.val();
							param += "&endtime="
									+ $("input[name='activityendtime']").val();
							alert(param);
							$.ajax({
								type : 'post',
								url : 'addactivity.do',
								data : param,
								success : function(data) {
									alert("发布活动成功！");
								},
								error : function() {
									alert("出错了！");
								}
							});
						});

		$('.teamtimepicker').datetimepicker({});

		//----------------------发布表单↑----------------------动态↓-------------------------------------------------
		$("#reply-toggle-1").click(function() {
			$("#reply-1").toggle(500);
		});
	});
	
function missioncomplete(text){
	$("#mission-"+text).hide(1000);
	
	$.ajax({
		url : "completemission.do?missionid=" + text,
		success : function(result) {
		}
	});
}
</script>

</head>
<body>
	<div class="container">
		<!-- 顶部导航栏 -->
		<div id="toprow" class="row clearfix">
			<div id="topcolumn" class="col-md-12 column">
				<nav style="margin: 0px" class="navbar navbar-default"
					role="navigation">
					<div class="navbar-header">
						<img style="width: 75px; height: 40px"
							src="style/image/ateamlogo.png">
						<!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a> -->
					</div>

					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li><h4>${currentCompany.companyname}</h4></li>
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li>
								<form class="navbar-form navbar-left" role="search">
									<div class="form-group">
										<input type="text" class="form-control" />
									</div>
									<button type="submit" class="btn btn-default">Submit</button>
								</form>
							</li>
							<li>
								<c:if test="${currentUser.role == 1}">
							 <button onclick="javascript:location.href='getapplyers.do'" class="btn btn-small" type="button">申请</button>
							 	</c:if>
							 	<c:if test="${currentUser.role == 2}">
							 <button onclick="javascript:location.href='getapplyers.do'" style="display:none;" class="btn btn-small disabled" type="button">申请</button>
							 	</c:if>
							 </li>
							 <li>
							<button onclick="javascript:location.href='logout.do'" class="btn btn-success" type="button">注销</button>
							</li>
						</ul>
					</div>

				</nav>
			</div>
		</div>

		<!-- 主体 -->
		<div class="row clearfix">
			<!-- 左边的按钮列表 -->
			<div
				style="padding: 0px; margin-bottom: 0px; background-color: #84C1FF"
				class="col-md-1 column">
				<div onclick="javascript:location.href='userinfo.jsp'" style="padding: 5px; height: 180px" class="leftbutton">
					<div>
						<img style="height: 100px; width: 100px; cursor: pointer;"
							src="${currentUser.head}">
						<h1>${currentUser.username}</h1>
					</div>
				</div>
				<div class="leftbutton"
					onclick="javascript:location.href='home.jsp'">
					<div class="buttoncss">
						<img src="style/image/ico/动态.png">
						<div class="buttonword">动态</div>
					</div>
				</div>
				<div style="background-color: #46A3FF" class="leftbutton">
					<div class="buttoncss">
						<img src="style/image/ico/待办.png">
						<div class="buttonword">待办</div>
					</div>
				</div>
				<div class="leftbutton"  onclick="javascript:location.href='project.jsp'">
					<div class="buttoncss">
						<img src="style/image/ico/项目.png">
						<div class="buttonword">项目</div>
					</div>
				</div>
				<div class="leftbutton" onclick="javascript:location.href='group.jsp'">>
					<div class="buttoncss">
						<img src="style/image/ico/小组.png">
						<div class="buttonword">小组</div>
					</div>
				</div>
				<div class="leftbutton" onclick="javascript:location.href='getcolleagues.do'"> 
					<div class="buttoncss">
						<img src="style/image/ico/同事.png">
						<div class="buttonword">同事</div>
					</div>
				</div>
				<div class="leftbutton" onclick="javascript:location.href='approval.jsp'">
					<div class="buttoncss">
						<img src="style/image/ico/审批.png">
						<div class="buttonword">审批</div>
					</div>
				</div>
				<div class="leftbutton" onclick="javascript:location.href='gotochart.do'">
					<div class="buttoncss">
						<img src="style/image/ico/报表.png">
						<div class="buttonword">报表</div>
					</div>
				</div>
			</div>

			<!-- 右边的内容  这里修改了bootstrap.css中关于滚动条的长度-->
			<div class="col-md-11 column pre-scrollable">
				<div
					style="width: 100%; display: block; float: left; padding-right: 10px">

<!--------------------------------- 大标签已完成或未完成 ------------------------------------------->
					<div class="tabbable" id="tabs-666531">
						<ul class="nav nav-tabs">
							<li class="active"><a href="#panel-tobedone"
								data-toggle="tab">待办事项</a></li>
							<li><a href="#panel-havedone" data-toggle="tab">已完成事项</a></li>
						</ul>
						<div class="tab-content">
<!--------------------------------- 未完成 ---------------------------------------------------------------->
							<div class="tab-pane active" id="panel-tobedone">
								<div class="tabbable" id="tabs-666530">
									<ul class="nav nav-tabs">
										<li class="active"><a href="#panel-mission"
											data-toggle="tab">发任务</a></li>
										<li><a href="#panel-activity" data-toggle="tab">发活动</a></li>
									</ul>
									<div class="tab-content">

										<!-- 发起任务的表单 -->
										<div class="tab-pane active" id="panel-mission">

											<div class="form-group">
												<input placeholder="请输入任务名称" type="text"
													class="form-control" id="missionname" />
											</div>
											<div class="form-group">
												<button class="btn" id="choseleader" type="button">选择负责人</button>
												<div id="choseleaderdiv"></div>
											</div>
											<div class="form-group">
												<a style="float: left">开始时间</a>
												<div style="float: left"
													class="input-append date teamtimepicker"
													id="datetimepicker" data-date="2017-08-04 01:00:00"
													data-date-format="yyyy-mm-dd hh:ii:ss">
													<input name="missionstarttime" size="16" type="text"
														value="2017-08-04 01:00:00"> <span class="add-on"><i
														class="icon-th"></i></span>
												</div>
												<a style="float: left">结束时间</a>
												<div style="float: left"
													class="input-append date teamtimepicker"
													data-date="2017-08-04 01:00:00"
													data-date-format="yyyy-mm-dd hh:ii:ss">
													<input name="missionendtime" size="16" type="text"
														value="2017-08-04 01:00:00"> <span class="add-on"><i
														class="icon-th"></i></span>
												</div>
											</div>
											<div class="form-group">
												<button class="btn" id="chosemember" type="button">选择参与者</button>
												<div id="chosememberdiv"></div>
											</div>
											<div class="form-group">
												<textarea placeholder="请输入任务描述" rows="3"
													class="form-control" name="content" id="missiondescription"></textarea>
											</div>

											<button style="float: right" id="missionsubmit" type="submit"
												class="btn btn-default">发布</button>
										</div>

<!------------------------------------------ 发起活动的表单--------------------------------------------------------->
										<div class="tab-pane" id="panel-activity">
											<div class="form-group">
												<input placeholder="请输入活动名称" type="text"
													class="form-control" id="activityname" />
											</div>
											<div class="form-group">
												<button class="btn" id="choseactivitymember" type="button">选择参与者</button>
												<div id="choseactivitymemberdiv"></div>
											</div>
											<div class="form-group">
												<a style="float: left">开始时间</a>
												<div style="float: left"
													class="input-append date teamtimepicker"
													id="datetimepicker" data-date="2017-08-04 01:00:00"
													data-date-format="yyyy-mm-dd hh:ii:ss">
													<input name="activitystarttime" size="16" type="text"
														value="2017-08-04 01:00:00"> <span class="add-on"><i
														class="icon-th"></i></span>
												</div>
												<a style="float: left">结束时间</a>
												<div style="float: left"
													class="input-append date teamtimepicker"
													data-date="2017-08-04 01:00:00"
													data-date-format="yyyy-mm-dd hh:ii:ss">
													<input name="activityendtime" size="16" type="text"
														value="2017-08-04 01:00:00"> <span class="add-on"><i
														class="icon-th"></i></span>
												</div>
											</div>
											<div class="form-group">
												<input placeholder="请输入活动地点" type="text"
													class="form-control" id="activityaddress" />
											</div>
											<div class="form-group">
												<textarea placeholder="请输入活动描述" rows="3"
													class="form-control" name="content"
													id="activitydescription"></textarea>
											</div>
											<button style="float: right" id="activitysubmit"
												type="submit" class="btn btn-default">发布</button>
										</div>
									</div>
								</div>
								
								<hr align=center color=#84C1FF size=2>
<!--------------------------------- 未完成的任务 ---------------------------------------------------------------->								
								<div  id="missionstobedone">

								</div>
							</div>


<!--------------------------------- 已完成 ---------------------------------------------------------------->
							<div class="tab-pane" id="panel-havedone">已完成事项</div>
						</div>
					</div>


				</div>
			</div>
		</div>
	</div>
</body>
</html>